<template>
  <div class="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainConHeader">
      <div class="mainConHeaderContent"></div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.id"
          v-for="item in list"
          :key="item.id"
        ></el-tab-pane>
      </el-tabs>
      <keep-alive>
        <component v-bind:is="currentTabComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import insuranceBaseConfig from './insuranceBaseConfig'
import guaranteeConfig from './guaranteeConfig'

export default {
  name: 'insuranceConfig',
  components: {
    insuranceBaseConfig,
    guaranteeConfig,
  },
  data() {
    return {
      titleText: '保险设置',
      activeName: '1',
      list: [
        {
          id: '1',
          label: '基础设置',
        },
        {
          id: '2',
          label: '承保机构设置',
        },
      ],
      currentTabComponent: 'insuranceBaseConfig',
    }
  },
  beforeRouteEnter: (to, from, next) => {
    if (from.path === '/home/newInsurance/guaranteeConfigDetail') {
      next((vm) => {
        vm.currentTabComponent = guaranteeConfig
        vm.activeName = '2'
      })
    } else {
      next()
    }
  },
  created() {},
  methods: {
    //tabs栏切换
    handleClick(tab, event) {
      if (this.activeName == 1) {
        this.currentTabComponent = insuranceBaseConfig
      } else if (this.activeName == 2) {
        this.currentTabComponent = guaranteeConfig
      }
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  padding-top: 0;
}
</style>
